<template>
  <layout>
    <template v-slot:title>表单填写</template>
    <template v-slot:actions>
      <el-button type="primary"
                 @click="save"><i class="el-icon-edit-outline" />保存</el-button>
    </template>
    <div class="form-list"
         style="padding-top:50px;">
      <div class="form-view"
           v-if="!isEmpty">
        <v-form-render ref="vformRender"
                       :formJson="formJson"
                       :formData="formData"
                       :optionData="optionData"
                       :previewState="false">
        </v-form-render>
      </div>
      <div v-else
           style="font-size:18px;color:#fafafa">
        请先设计表单，并填写信息
      </div>
    </div>
  </layout>
</template>
<script>
import { default as apiList } from '@/apis/list';
import layout from '@/components/Layout';
export default {
    name: 'form-list',
    components: { layout },
    data() {
        return {
            pageSize: 5,
            pageNum: 1,
            formJson: {},
            formData: {},
            optionData: {},
            isEmpty: false,
            item: {},
        };
    },
    created() {
        this.loadForm();
    },
    methods: {
        ...apiList,
        isObjectEmpty(obj) {
            return Object.keys(obj).length == 0;
        },
        loadForm: function () {
            this.getForm(this.$route.query.id).then(res => {
                this.item = res.data;
                if (this.isObjectEmpty(JSON.parse(res.data.formConfig))) return;
                this.$refs.vformRender.setFormJson(JSON.parse(this.item.formConfig));
                this.$refs.vformRender.setFormData(JSON.parse(this.item.formData));
            });
        },
        save: function () {
            this.$refs.vformRender.getFormData().then(data => {
                this.item.formData = JSON.stringify(data);
                this.saveForm(this.item).then(res => {
                    if (res.data == true) {
                        this.$message.success('保存成功');
                        this.naviBack();
                    }
                });
            });
        },
        naviBack() {
            setTimeout(() => {
                this.$router.go(-1);
            }, 1500);
        },
    },
};
</script>
<style scoped lang="scss">
.form-list {
    width: 100%;
    height: 100%;

    $topHeight: 80px; //修改标题栏高度
    $footHeight: 50px; //修改底部栏高度

    text-align: center;

    .form-view {
        width: 100%;
        max-width: 1500px;
        display: inline-block;
    }
}
</style>